import React from 'react'
import PropTypes from 'prop-types'

import './css/tabbar.css'

const Tabbar = (props) => {
  return (
    <ul className='tabbar'>
      {props.buttons.map((item, index) => {
        return (
          <li
            key={item.id}
            className={props.currentIndex === index ? 'active' : ''}
            onClick={() => props.event(index)}
          >
            {item.name}
          </li>
        )
      })}
    </ul>
  )
}

Tabbar.defaultProps = {
  buttons: [],
  currentIndex: 0,
  event: (index) => {},
}

Tabbar.propTypes = {
  buttons: PropTypes.array,
  currentIndex: PropTypes.number,
  event: PropTypes.func,
}

export default Tabbar
